<template>
	<view> 

		<view>
			<u-navbar title="订单确认" :autoBack="true"></u-navbar>
		</view>

		<view class="informationOfDishes">  
			<view class="Text_top">
				<u--text text="餐品详情" align="left" size=20 :bold="true"></u--text>
			</view>
			<view class="fenggexian">
				<u-divider :hairline="true" :dot="true"></u-divider>
			</view>
			
			<view class="listOfDishes" v-for="(item,index) in dishesChoice">
				<view class="Dished">
					<view class="ImageDish">
						<image :src="item.avatar" class="viewOfDished"></image>
					</view>
					<view class="DishInformation_text">
						<!-- 除了图片外例外的信息放在一个view中展示 -->
						
						<!-- 第一个为菜品的名称 -->
						<view class="DishName">
							<u--text :text="item.name" align="left" size=18 :bold="true"></u--text>
						</view>
						<!-- 第二个为菜品的描述 -->
						<!-- <view class="DishDescription">
							<u--text :text="item.dishDescription" align="left" size=14 ></u--text>
						</view> -->
						<!-- 第三个为步进器 -->
						<view class="NumberBoxDish">
							<!-- <u-number-box v-model="item.number" @change="valChange" @click="val"></u-number-box> -->
							<u-number-box v-model="item.showNumber" :min="0" :max="10">
							    <view
							        slot="minus"
							        class="minus"
							    >
							        <u-icon
							            name="minus"
							            size="12"
										@click="sub(item)"
							        ></u-icon>
							    </view>
							    <text
							        slot="input"
							        style="width: 50px;text-align: center;"
							        class="input"
							    >{{item.number}}</text>
							    <view
							        slot="plus"
							        class="plus"
							    >
							        <u-icon
							            name="plus"
							            color="#FFFFFF"
							            size="12"
										@click="add(item)"
							        ></u-icon>
							    </view>
							</u-number-box>
						
						</view>
						<!-- 第四个为价格 -->
						<view class="price_view">
							<text>￥{{item.price}}</text>
						</view>
					</view>
				</view>
				<!-- 两个list中间加上一段空白 -->
				<view class="blank"></view>
			</view>
			
						
			<u-divider :hairline="true" :dot="true"></u-divider>
		</view>
		
		<view class="blank"></view>
		
		<view class="informationOfDesk">
			<u-cell-group>
				<u-cell
					    size="large"
					    title="添加备注"
					    value="你想对大厨说什么"
						@click="navToRemarks"
					    isLink
					></u-cell>
					<u-cell
					    size="large"
					    title="选择就餐人数"
					    :value="peopleNumber"
						@click="ChangePeopleNumber"
						isLink
					></u-cell>
					<u-cell
					    size="large"
					    title="发票"
					    value="该店不支持线上开发票,请联系商家"
					></u-cell>
			</u-cell-group>
		</view>
		<view>
			 <u-picker 
			 :show="show" 
			 :columns="columns" 
			 keyName="label" 
			 @cancel="close()" 
			 @confirm="sure">
			</u-picker>
		</view>
		
		<view class="payView">
			<view class="numberPirce_view">
				<u-count-to class="numberPirce"
				:startVal="lastPrice" 
				:endVal="totalPrice"
				:fontSize="30"
				color="#FFFFFF"
				:bold="true"
				>
				</u-count-to>
			</view>
			
			<view class="Button_pay_view">
				<button class="payButton" @click="pay">付款</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:2,
				price:23.5,
				dishesChoice:[
					{
						id:111,
						avatar:'https://s1.328888.xyz/2022/07/09/YjS6.png',
						price:23.5,
						name:'麻婆豆腐',
						number:1,
						showNumber:1
					},
					{
						id:11,
						avatar:'https://s1.328888.xyz/2022/07/09/YjS6.png',
						price:23.5,
						name:'麻婆豆腐',
						number:1,	
						showNumber:1
					}
				],
				dishPriceTotal:[],
				totalPriceLast:0,
				totalPriceFinal:100,
				peopleNumber:3,
				show: false,
				openid:"",
			     columns: [
			        [{
			            label: '1',
			            // 其他属性值
			            id: 1
			            // ...
			        }, 
					{
			            label: '2',
			            id: 2
			        },
					{
					    label: '3',
					    id: 3
					},
					{
					    label: '4',
					    id: 4
					},
					{
					    label: '5',
					    id: 5
					},
					{
					    label: '6',
					    id: 6
					},
					{
					    label: '7',
					    id: 7
					}]
			    ],
				totalPrice:0,
				lastPrice:0,
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title:'设置标题(可以是变量)'
			})
		},
		onLoad(e) {
			let obj = e.orderList.replace("\"([^\"]*)\"", "$1");
			this.dishesChoice = JSON.parse(obj)
			this.update()
			// for(var i=0;i<this.dishesChoice.length;i++)
			// {
				
			// }
		},
		onshow(){
			
			
			this.openid = wx.getStorageSync("openid")
		},
		methods: {
			
			val(){
				console.log("test")
			},
			
			refresh(){
				var _this = this
				
				_this.totalPriceLast = _this.totalPriceFinal
				
				console.log("length:"+_this.dishesChoice.length)
					
				var price = 0
				for(var i=0;i<_this.dishesChoice.length;i++){
					price+=_this.dishesChoice[i].dishNumber*_this.dishesChoice[i].dishPrice
				}
				console.log(price)
			},
			
			valChange(){
				
				this.refresh()
			},
			navToRemarks(){
				uni.navigateTo({
					url:'childrenPage/remarks/remarks'
				})
			},
			ChangePeopleNumber(){
				this.show=true
			},
			close(){
				this.show=false
			},
			sure(e){
				console.log('confirm', e.details)
				this.show=false
			},
			pay(){
				
				var _this = this
				let orderDishList=[]
				for(var i=0;i<_this.dishesChoice.length;i++)
				{
					var orderDish={
						dishName : _this.dishesChoice[i].name,
						dishAvatar : _this.dishesChoice[i].avatar,
						dishPrice : _this.dishesChoice[i].price,
						userComment : "少放点辣",
						dishNum : _this.dishesChoice[i].number
					}
					orderDishList.push(orderDish)
				}
				console.log("aaa:"+orderDishList.length)
				var data11 = {
					"orderTime":"2022.2.21",
					"peopleNum":4 ,
					"restaurantName": "aaa",
					"restaurantAvatar":"aaa", 
					"orderPrice": 23,
					"status":0,
				}
				
				uni.request({
					// url:_this.$store.state.IP+"order/add"+_this.openid,
					url:"http://localhost:9999/order/add/oNKA05KR7wvQcu_YD0iIZE4IW3QQ",
					
					method:"GET",
					
					data:{
						"orderTime":"2022.2.21",
						"peopleNum":4 ,
						// "orderDishList":jsonObject,
						"restaurantName": "aaa",
						"restaurantAvatar":"aaa", 
						"orderPrice": 23,
						"status":0,
					},
					success() {
						
					}
				})
			},
			add(item){
				item.number++

				this.update()
			},
			sub(item){
				if(item.number>0)
				{
					item.number--
				}
	
				this.update()
			},
			update(){
				var _this = this
				_this.lastPrice = _this.totalPrice
				var price=0
				for(var i=0;i<_this.dishesChoice.length;i++)
				{
					var temp = _this.dishesChoice[i].number * _this.dishesChoice[i].price
					console.log("temp:"+temp)
					price += temp
				}
				_this.totalPrice = price
			}
		}
	}
</script>

<style lang="scss">
	
	/* .all{
		background-color: red;
	} */
	.informationOfDishes{
		margin-top: 120rpx;
		background-color: #FFFFFF;
		height: 600rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		border-radius: 20rpx;
	}
	.Text_top{
		margin-top: 0rpx;
		margin-left: 30rpx;
		margin-bottom: -20rpx;
		
	}
	.ImageDish{
		display: flex;
	}
	image {
		display: flex;
	}
	.DishName{
		font-size: 60rpx;
		
		
	}
	.NumberBoxDish{
		margin-top: 120rpx;
		margin-left: -100rpx;
	}
	.DishDescription{
		margin-top: 60rpx;
		margin-left: -140rpx;
	}
	
	.price_view{
		font-size: 40rpx;
		font-weight: bolder;
		margin-top: 130rpx;
		margin-left: 80rpx;
	}
	.fenggexian{
		
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.viewOfDished{
		width: 180rpx;
		height: 180rpx;
		margin-left: 25rpx;
	}
	.fenggexian_view{
		margin-top: 200rpx;
	}
	.Dished{
		display: flex;
	}
	.DishInformation_text{
		display: flex;
		margin-left: 20rpx;
	}
	.blank{
		height: 50rpx;
	}
	
	.payView{
		position: fixed;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		
		height: 100rpx;
		margin-buttom: 0rpx;
		border-radius: 100rpx;
		background-color: #232400;
		
		.Button_pay_view{
			display: flex;
			margin-top: -80rpx;
			.payButton{
				width: 200rpx;
				height: 100rpx;
				border-radius: 100rpx;
				margin-right: 0rpx;
			}
			
		}
		
		.numberPirce_view{
			display: flex;
			margin-left: 5%;
			margin-top: 0;
		}
	}
	
	.TotalPrice_top{
		
	}
	
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}
	
	.input {
		padding: 0 0px;
	}
	
	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 20%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
	page{
	    background: #EFEFEF;
	}
</style>
